import { Button, Drawer, Form, Input, message, Select } from 'antd'
import type { teamType, userType } from '@/types'
import React, { useEffect, useState } from 'react'
import http from '@/utils/request'
import { teamTypes } from '@/assets/dict'
import { queryUserList } from '@/pages/auth/utils/getList'
import './index.scss'

const teamDrawer: React.FC<{ isOpen: boolean, team?: teamType, onClose: (val:boolean) => void }> = ({ isOpen, team, onClose }) => {
  const [form] = Form.useForm()
  const [loading, setLoading] = useState(false)
  const [userList, setUserList] = useState<userType[]>([])
  useEffect(() => {
    form.resetFields()
    queryUserList().then((users) => {
      setUserList(users)
    })
  }, [team])

  const handleOk = () => {
    form?.validateFields()
      .then((values) => {
        setLoading(true)
        const url = team?.id ? '/disp/biz/team/update' : '/disp/biz/team/insert'
        http.post(url, {
          ...values,
          id: team?.id
        }).then(() => {
          message.success(`${team?.id ? '编辑' : '添加'}成功！`)
          onClose(true)
        }).catch(err => {
          message.error(err.msg || '操作失败')
        }).finally(() => {
          setLoading(false)
        })
      })
      .catch((errorInfo) => {
        console.log('校验失败:', errorInfo)
      })
  }
  const handleCancel = () => {
    onClose(false)
  }

  return (<Drawer
    title={`${team?.id ? '编辑' : '添加'}团队`}
    closable={false}
    width={600}
    open={isOpen}>
    <div className="drawer-container flex-column">
      <Form
        form={form}
        initialValues={team || {}}
        style={{ maxWidth: 600, marginTop: 20 }}
        layout="vertical">
        <Form.Item<teamType>
          label="团队名称"
          name="teamName"
          rules={[{ required: true, message: '团队名称为空!' }]}
        >
          <Input
            allowClear
            style={{ width: '100%' }}
          />
        </Form.Item>
        <Form.Item<teamType>
          label="团队类型"
          name="teamType"
          rules={[{ required: true, message: '团队类型为空!' }]}
        >
          <Select
            style={{ width: '100%' }}
            options={ teamTypes }
          />
        </Form.Item>
        <Form.Item<teamType>
          label="团队领导"
          name="teamLeader"
          rules={[{ required: true, message: '团队领导为空!' }]}
        >
          <Select
            style={{ width: '100%' }}
            options={ userList }
          />
        </Form.Item>
        <Form.Item<teamType>
          label="备注"
          name="remark"
          rules={[{ required: false }]}
        >
          <Input
            allowClear
            style={{ width: '100%' }}
          />
        </Form.Item>
      </Form>
      <div className="flex1" />
      <div className="button-container flex-row">
        <div className="flex1" />
        <Button onClick={handleCancel} className="btn">取 消</Button>
        <Button onClick={handleOk} loading={loading} className="btn" type="primary">保 存</Button>
      </div>
    </div>
  </Drawer>)
}

export default teamDrawer
